<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>bar</title>
    <script src="../echarts.min.js"></script>
</head>
<body style="background:#0B0D39">
    <!-- 为ECharts准备一个具备大小（宽高）的DOM -->
    <div id="main" style="width: 100%; height: 500px"></div>

    <script>
        // 基于准备好的DOM，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图标的配置项和数据
option = {
    color: ['#5554FF', '#60E960', '#FF9E33', '#FFD82E'],
    textStyle: {
        color: '#fff'
    },
    grid: [
        {x: '7%', y: '7%', width: '40%', height: '70%'},
        {x2: '5%', y: '7%', width: '40%', height: '70%'},
    ],
    // tooltip: {
    //     formatter: 'Group {a}: ({c})'
    // },
    // 图例
    legend: [
        {
            orient: 'vertical',
            top: '0',
            left: '37%',
            // width: 183,
            borderColor: '#1465A6',
            borderWidth: 2,
            borderRadius: 2,
            padding: 20,
            itemWidth: 30,
            // itemHeight: 30,
            itemGap: 20,// 图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔
            textStyle: {
                color: '#fff'
            },
            // selectedMode: 'single',
            // inactiveColor: '#ccc',
            data: ['1#','2#','3#','4#']
        },
        {
            orient: 'vertical',
            top: '0',
            left: '85%',
            // width: 183,
            borderColor: '#1465A6',
            borderWidth: 2,
            borderRadius: 2,
            padding: 20,
            itemWidth: 30,
            // itemHeight: 30,
            itemGap: 20,// 图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔
            textStyle: {
                color: '#fff'
            },
            // selectedMode: 'single',
            // inactiveColor: '#ccc',
            data: ['1#','2#','3#','4#']
        },
    ],
    xAxis: [
        {
            gridIndex: 0,
            name: '风速(M/S)',
            nameLocation: 'center', // 坐标轴名称显示位置。
            nameGap: 40, //坐标轴名称与轴线之间的距离 15
            // type: 'category',
            axisLine: {
                lineStyle: {
                    // color: 'rgba(43, 176, 217, 1)'
                    color: '#153E6A'
                }
            },
            // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
            // boundaryGap: ['70%', '70%'],
            boundaryGap: false,
            data: [0, 5, 10, 15, 20, 25]
        },
        {
            gridIndex: 1, 
            name: '风速(M/S)',
            nameLocation: 'center', // 坐标轴名称显示位置。
            nameGap: 40, //坐标轴名称与轴线之间的距离 15
            // type: 'category',
            axisLine: {
                lineStyle: {
                    // color: 'rgba(43, 176, 217, 1)'
                    color: '#153E6A'
                }
            },
            // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
            // boundaryGap: ['70%', '70%'],
            boundaryGap: false,
            data: [0, 5, 10, 15, 20, 25]
        },
    ],
    yAxis: [
        {
            gridIndex: 0,
            name: '风速概率(%)',
            type: 'value',
            // 坐标轴在 grid 区域中的分隔线。
            splitLine: {
                // show: false,
                lineStyle: {
                    color: 'rgba(43, 176, 217, 0.3)',
                    type: 'dashed'

                }
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(43, 176, 217, 0.3)'
                }
            },
            splitLine: {
                // show: false,
                lineStyle: {
                    color: '#50708F',
                    type: 'dashed'
                }
            },
        },
        {
            gridIndex: 1,
            name: '风能概率(%)',
            type: 'value',
            // 坐标轴在 grid 区域中的分隔线。
            splitLine: {
                // show: false,
                lineStyle: {
                    color: 'rgba(43, 176, 217, 0.3)',
                    type: 'dashed'

                }
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(43, 176, 217, 0.3)'
                }
            },
            splitLine: {
                // show: false,
                lineStyle: {
                    color: '#50708F',
                    type: 'dashed'
                }
            },
        },
    ],
    series: [
        {
            name: '#1',
            type: 'line',
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: ['20', '50', '80', '10', '100', '8']
        },
        {
            name: '2#',
            type: 'line',
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: ['15', '22', '66', '87', '34', '6']
        },
        {
            name: '1#',
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: ['20', '50', '80', '10', '100', '8']
        },{
            name: '2#',
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: ['15', '22', '66', '87', '34', '6']
        }
    ]
};
        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option)
    </script>
</body>
</html>